<script>
/**
 * @desc 主页面的'钱包'
 */

import { mapState, mapGetters, mapMutations } from 'vuex'
import TheOnloadLayer from '@/components/the-onload-layer'
import TheBottomTabs from '@/components/the-bottom-tabs'
import MonthBudgetPanel from './month-budget-panel'
import IncomeAndExpenditure from './income-and-expenditure'
import MonthBook from './month-book'

export default {
  name: 'wallet-page',

  props: { scrollable: Boolean },

  components: {
    TheOnloadLayer,
    TheBottomTabs,
    MonthBudgetPanel,
    IncomeAndExpenditure,
    MonthBook
  },

  data: () => ({
    tabs: ['所有', '收入', '支出'],
    showTopTab: false,
    showLoading: false,
    showContent: false
  }),

  computed: {
    ...mapState(['systemInfo']),
    ...mapState('Wallet', ['tabIndex', 'theTabOffset']),
    ...mapGetters('Wallet', ['days']),
    offsetTop() {
      return this.systemInfo.statusBarHeight + 44
    }
  },

  methods: {
    ...mapMutations('Wallet', ['handleTab', 'handleTabOffset']),
    handleScroll(e) {
      const t = e.mp && e.mp.detail ? e.mp.detail.scrollTop : 0
      const isShow = t > this.theTabOffset - this.offsetTop
      if (isShow !== this.showTopTab) {
        this.showTopTab = isShow
      }
    }
  },

  mounted() {
    this.showLoading = true
    const showContentTimer = setTimeout(() => {
      this.showContent = true
      clearTimeout(showContentTimer)
    }, 1000)
    const showLoadingTimer = setTimeout(() => {
      this.showLoading = false
      wx
        .createSelectorQuery()
        .select('#wallet-type-tabs')
        .boundingClientRect()
        .exec(res => {
          this.handleTabOffset(res[0].bottom)
        })
      clearTimeout(showLoadingTimer)
    }, 2000)
  }
}
</script>

<template>
  <div name="main-container">
    <div
      :class="$sty.wallet"
      v-show="showContent"
    >
      <!-- 渐变背景 -->
      <div :class="$sty.animateBg">
        <span :class="$sty.bgBall1"></span>
        <span :class="$sty.bgBall2"></span>
        <span :class="$sty.bgBall3"></span>
      </div>

      <div
        :class="$sty.topBar"
        :style="{paddingTop:systemInfo.statusBarHeight + 'px', height:'44px'}"
      >
        <div :class="[$sty.tabs, showTopTab?$sty.show:'']">
          <span
            :class="[$sty.tab,i===tabIndex?$sty.active:'']"
            :key="i"
            @click="()=>handleTab(i)"
            v-for="(v,i) in tabs"
          >{{v}}</span>
        </div>
      </div>

      <scroll-view
        :class="$sty.scrollView"
        :scroll-y="true"
        @scroll="handleScroll"
      >
        <div :class="$sty.bookKeeping">
          <p>今天是你记账的第</p>
          <p>
            <span :class="$sty.day">{{days}}</span>
            <span>天</span>
          </p>
        </div>

        <month-budget-panel/>
        <income-and-expenditure/>
        <month-book/>
      </scroll-view>

      <the-bottom-tabs/>
    </div>

    <the-onload-layer :show="showLoading"/>
  </div>
</template>

<style lang="scss" module>
@import './styles.scss';
</style>
